<!doctype html>
<html manifest="do-me.manifest" ng-app="do-me">

  <head>
    <title>Do Me</title>
    <link rel="stylesheet" href="libs/font-awesome-4.0.3/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="libs/angular-1.2.16.min.js"></script>
    <script src="libs/keymaster.min.js"></script>
    <script src="libs/sprintf-0.5.js"></script>
    <script src="libs/humanized_time_span.js"></script>
    <link rel="stylesheet" type="text/css" href="libs/message/themes/message_default.css">
    <script src="libs/message/message.js"></script>
    <script src="libs/backup-0.1.js"></script>

    <script type="text/javascript">
      window.do_me = {mobile: false};

      // Check if a new cache is available on page load.
      // TODO Move this to a background poller to speed up page load and detect
      // new version in long-running instances.
      window.addEventListener('load', function(e) {
        window.applicationCache.addEventListener('updateready', function(e) {
          if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
            // Browser downloaded a new app cache.
            // Swap it in and reload the page to get the new hotness.
            window.applicationCache.swapCache();
            if (confirm("A new version of this site is available. Load it?")) {
              window.location.reload();
            } else {
              alert("Things may not work properly until you reload the page.");
            }
          }
        }, false);
      }, false);

      angular.module('do-me', []); // define the do-me module
    </script>
    <script src="storage.js"></script>
    <script src="net.js"></script>
    <script src="search.js"></script>
    <script src="sync.js"></script>
    <script src="tasks.js"></script>
    <script src="message_ctrl.js"></script>
    <script src="search_ctrl.js"></script>
    <script src="sync_ctrl.js"></script>
    <script src="tags_ctrl.js"></script>
    <script src="tasks_ctrl.js"></script>
  </head>
  
  <body>
    <div ng-controller="MessageCtrl"></div> <!-- Just a place holder to load controller. Nothing shown here. -->

    <header>
      <div id="hdr">
        <h1 id="logo">Do Me</h1>

        <form ng-controller="SearchCtrl" id="search">
          <input type="text" class="search" placeholder="Search for text or tag" ng-model="searchInput">
          <button type="submit" class="fa fa-search" value="Search" ng-click="searchHandler($event, searchInput)"></button>
        </form>
      </div>
    </header>

    <div id="container">
        
      <div id="sidebar">
        <div ng-controller="TagsCtrl">
          <h4>Tags:</h4>
          <strong ng-show="searchStr.text == ''">All Not Waiting</strong>
          <a ng-hide="searchStr.text == ''" href="" ng-click="searchFor('')">All Not Waiting</a>

          <table class="">
            <tr ng-repeat="tag in presentTags() track by $index | orderBy:'text'">
              <td>
                <strong ng-show="searchStr.text == tag.text">{{tag.text}}</strong>
                <a href="" ng-hide="searchStr.text == tag.text" ng-click="searchFor(tag.text)">{{tag.text}}</a>
              </td>
              <td width="100%"><!-- so delete icons are mashed to the right -->
              </td>
              <td>
                <i class="fa fa-minus-circle" ng-click="deleteTag(tag)"></i>
              </td>
            </tr>
          </table>
          
          <strong ng-show="searchStr.text == 'waiting:only'">Waiting</strong>
          <a ng-hide="searchStr.text == 'waiting:only'" href="" ng-click="searchFor('waiting:only')">Waiting</a>

          <form ng-submit="addTag()">
            <input ng-model="newTag" placeholder="Add tag" />
            <button type="submit" class="fa fa-plus" value="Add" />
          </form>
        </div>
      </div>

      <div ng-controller="TasksCtrl" id="main">
        
        <div class="task-list todo">
          <span ng-show="getResults().length == 0">Nothing to do!</span>
          <ul>
            <li ng-repeat="task in getResults() track by $index">
              <div ng-hide="editing.text && $index == cursor">
                <i ng-show="$index == cursor" class="fa fa-chevron-right"></i>
                <input type="checkbox" id="toggle" class="checkbox" ng-model="task.done" ng-change="updatedTask(task)" >
                <a href="" class="tag" ng-repeat="tag in task.tags" ng-click="searchHandler($event, tag)">{{tag}} </a>
                <span ng-click="editTask($index)" class="task" ng-bind-html="linkify(task.text)"></span>
              </div>
  
              <form ng-submit="updateTask()" ng-show="editing.text && $index == cursor">
                <input class="edit{{$index}} text" ng-model="editing.text">
                <button type="submit" value="Save">Save</button>
              </form>
            </li>
          </ul>
        </div>
  
        <form ng-submit="addTask(newTask)" class="addClass">
          <input type="text" class="new-task" placeholder="Add new task" ng-model="newTask" style="padding: 11px 2%;">
          <button type="submit" class="fa fa-plus" value="Add"></button>
        </form>
    
        <div id="sync" ng-controller="SyncCtrl">
          <a href="" class="syncit" ng-click="sync()" ng-hide="syncStatus == 'syncing'">
            Sync now
          </a>
          <span class="syncit" ng-show="syncStatus == 'syncing'">Syncing...</span>
          <br />
          {{prettyLastSynced}}<br />
          <a href="" ng-click="downloadAsFile()">Export your data as a file</a><br><!-- TODO prevent default on click -->
          <a ng-click="logTasks()" href="">Debugging: Log tasks</a>
        </div>

      </div> <!-- end of main -->
    </div> <!-- end of container -->
    
    <footer>
      <div id="shortcuts">
        <strong>Keyboard Shortcuts</strong><br>
        Search &nbsp;/  &nbsp;&nbsp;&nbsp; Down, Up &nbsp;j, k &nbsp;&nbsp;&nbsp; Edit task &nbsp;o, enter &nbsp;&nbsp;&nbsp; Finish task &nbsp;c, f &nbsp;&nbsp;&nbsp;
        Add new task &nbsp;a, n, t
      </div>

      <p>I love feedback! Please email it to
      <a href="mailto:daniel@benamy.info">daniel@benamy.info</a>.</p>
    </footer>
  </body>

</html>
